import { graphql } from 'gatsby';

import Callout from '../../components/Callout';
import ComponentApi from '../../components/ComponentApi';
import ReactPlayground from '../../components/ReactPlayground';

import FormText from '../../examples/Form/FormText';

# Form text

<p className="lead">Create block-level or inline-level form text.</p>

## Overview

Block-level help text in forms can be created using `<Form.Text>`. Inline help
text can be flexibly implemented using any inline HTML element and utility classes
like `.text-muted`.

<Callout>
  <h5>Associating help text with form controls</h5>
  Help text should be explicitly associated with the form control it relates to using
  the <code>aria-describedby</code> attribute. This will ensure that assistive technologies—such
  as screen readers—will announce this help text when the user focuses or enters
  the control.
</Callout>

Form text below inputs can be styled with `<Form.Text>`. This component includes
`display: block` and adds some top margin for easy spacing from the inputs above.

<ReactPlayground codeText={FormText} />

## API

<ComponentApi metadata={props.data.FormText} exportedBy={props.data.Form} />

export const query = graphql`
  query FormTextQuery {
    Form: componentMetadata(displayName: { eq: "Form" }) {
      ...ComponentApi_metadata
    }
    FormText: componentMetadata(displayName: { eq: "FormText" }) {
      ...ComponentApi_metadata
    }
  }
`;
